<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>

<body>
    <div class="container-login">
        <div class="container-pic">
            <img src="pic/computer.png" width="350px">
        </div>
        <div class="login-dialog">
            <h3>登陆</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" name="userName" id="userName" class="form-control">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" name="password" id="password" class="form-control">
            </div>
            <div class="row">
                <button type="button" class="btn btn-info btn-lg" onclick="login()">登录</button>
            </div>
        </div>
    </div>
    <!-- 引入jQuery库 -->
    <!-- jQuery是一个快速、小巧且功能丰富的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax操作 -->
    <script src="js/jquery.min.js"></script>
    <script>
        /**
         * 登录处理函数
         * 当用户点击登录按钮时调用此函数
         * 功能：收集用户输入的用户名和密码，通过Ajax发送到服务器验证
         */
        function login() {
            // 使用jQuery Ajax发送登录请求到后端服务器
            $.ajax({
                type: "post",           // 使用POST方法提交，适合传输敏感数据如密码
                url: "/user/login",     // 请求的后端登录接口地址
                data: {                 // 要发送到服务器的数据对象
                    // $("#userName") 是jQuery选择器，选取id为userName的输入框
                    // .val() 方法获取输入框的当前值
                    name: $("#userName").val(),     // 获取用户名输入框的值
                    password: $("#password").val()  // 获取密码输入框的值
                },
                /**
                 * 请求成功回调函数
                 * @param {*} result - 服务器返回的数据
                 * 当HTTP状态码为200且服务器正常返回数据时触发
                 */
                success: function (result) {
                    // result参数接收服务器返回的响应数据
                    if (result) {
                        // 如果result为true，表示登录验证成功
                        // location.href 是浏览器窗口的地址栏对象
                        // 修改location.href会触发页面跳转，实现登录成功后的页面导航
                        location.href = "book_list.html";  // 跳转到图书列表页面
                    } else {
                        // 如果result为false，表示用户名或密码错误
                        // alert() 函数显示警告对话框，提示用户登录失败
                        alert("账号或密码不正确!");
                    }
                },
                /**
                 * 请求失败回调函数
                 * @param {Object} xhr - XMLHttpRequest对象，包含请求的详细信息
                 * @param {String} status - 请求状态文本描述，如"timeout"、"error"等
                 * @param {String} error - 错误信息
                 * 当请求发生错误（网络问题、服务器错误等）时触发
                 */
                error: function (xhr, status, error) {
                    // console.error() 在浏览器控制台输出错误信息，便于调试
                    console.error("登录请求失败:", error);
                    // 给用户友好的错误提示，避免显示技术性错误信息
                    alert("网络错误，请稍后重试!");
                }
            });
        }
    </script>
</body>

</html>